﻿@page "/closebutton"

<h1>Hiding the modal close button</h1>

<hr class="mb-5" />

<p>
    By default, a close button is shown in the modal. If you prefer, the button can be hidden and you can handle closing the modal yourself.
</p>

<div class="card mb-4">
    <h5 class="card-header">Setting on a per modal basis</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("var options = new ModalOptions() { HideCloseButton = true };")
                <br />
                @("Modal.Show<Confirm>(\"Hiding Close Button\", options);")
            </code>
        </p>
    </div>
</div>

<div class="card mb-4">
    <h5 class="card-header">Setting globally for all modals</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("<BlazoredModal HideCloseButton=\"true\" />")
            </code>
        </p>
    </div>
</div>

<button @onclick="CloseButtonShown" class="btn btn-primary">Show the close button</button>
<button @onclick="CloseButtonHidden" class="btn btn-secondary">Hide the close button</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; }

    void CloseButtonShown()
    {
        Modal.Show<Confirm>("Showing Close Button (default)");
    }

    void CloseButtonHidden()
    {
        var options = new ModalOptions { HideCloseButton = true };
        Modal.Show<Confirm>("Hiding Close Button", options);
    }
}